<template>
  <div class="wrapper">
    <header>
      <div class="left">
        <img src="@/assets/heima.b5a855ee.png" alt="" />
        <span>{{ title }}</span>
      </div>
      <el-button type="info" @click="exit">退出</el-button>
    </header>
    <section>
      <aside>
            <el-menu 
                router
                background-color="#333744"
                text-color="white">
                <el-submenu :index="item.id + ''" v-for="item in menus" :key="item.id">
                    <!-- 标题 -->
                    <template slot="title">{{item.authName}}</template>
                        <el-menu-item-group>
                            <el-menu-item 
                                v-for="it in item.children"       
                                :index = "it.path"
                                :key="it.id">
                                {{it.authName}}
                            </el-menu-item>
                        </el-menu-item-group>
                </el-submenu>
            </el-menu>


      </aside>
      <main>
        <!-- 面包屑 -->
        <el-breadcrumb separator="/" v-if="parent">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{parent}}</el-breadcrumb-item>
            <el-breadcrumb-item>{{child}}</el-breadcrumb-item>
        </el-breadcrumb>

        <div class="card">
            <router-view></router-view>
        </div>

      </main>
    </section>
  </div>
</template>

<script>
import {mapState} from "vuex"
export default {
  name: "HomeLayouts",
  data() {
    return {
      title: process.env.VUE_APP_TITLE,
      /**
       * 父菜单
       */
      parent:"",
      /**
       * 子菜单
       */
      child:"",
    };
  },
  methods:{
    /**
     * 退出
     */
    async exit(){
        try {
            await this.$confirm("您确定要退出吗？？？？")
            this.$store.dispatch("exit");
        } catch (error) {}
    },   
    /**
     * 根据路径查找当前页面的名称
     */
    findNames(){
        const path = this.$route.path.replace("/","");
        console.log(path)
        for(const parent of this.menus){
            for(const child of parent.children){
                if(child.path === path){
                    this.parent = parent.authName
                    this.child = child.authName
                    return
                }
            }
        }
    }
  },
  created(){
    this.findNames()
  },
  updated(){
    this.findNames()
  },
  computed: {
    ...mapState(["menus"])
  }
};
</script>

<style lang="scss" scoped>
.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;

  header {
    flex-shrink: 0; //缩小比例
    height: 60px;
    background: #373d41;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-size: 20px;
    .left {
      display: flex;
      align-items: center;
      margin-left: 5px;
      span {
        margin-left: 15px;
      }
    }
    .el-button {
      margin-right: 20px;
    }
  }

  section {
    flex: 1;
    display: flex;
    overflow: hidden; //外面超出隐藏

    aside {
      width: 200px;
      max-height: 100%;
      overflow: auto;
      background: #333744;
    }

    main {
      max-height: 100%;
      overflow: auto;
      flex: 1;
      background: #eaedf1;
      padding:20px;
        ::v-deep .el-breadcrumb{
            font-size: 14px;
        }
        .card {
            padding: 20px;
            margin-top: 15px;
            border:1px solid #ebeef5 ;
            border-radius: 4px;
            background: white;
            box-shadow: 0 1px 1px rgba(0,0,0,.15);
        }
    }
  }
}
</style>